import { Card, message } from 'antd'
import logo2 from '@/assets/logo2.png'
import loginimg from '@/assets/loginimg.png'
import './index.scss'
import { Form, Input, Button, Checkbox } from 'antd'
import { useDispatch } from 'react-redux'
import { fetchLogin } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'


const Login = () => {
  const dispatch=useDispatch()
  const navigate=useNavigate()
  const onFinish=async (values)=>{
    console.log(values)
    
    //触发异步action fetchLogin
   await dispatch(fetchLogin(values.code))
    //跳转到首页
    navigate('/')

    //提示一下用户
    message.success('登录成功')

   }
  // const onFinish=async(value)=>{
  //   console.log(value.code) 
  //   try {
  //     // 使用axios发送POST请求，假设你的接口接收JSON格式的数据，这里的value就是要发送的数据
  //     const response = await axios.post('/api/auth/user/login?code=5634', value.code, {
  //         headers: {
  //             // 根据实际接口要求设置请求头中的Content-Type等信息，如果是JSON数据一般如下设置
  //             'Content-Type': 'application/json', 
  //         },
  //     });
  //     console.log('请求成功，响应数据:', response.data);
  // } catch (error) {
  //     console.error('请求出错:', error);
  // }
  // }
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo2} alt="" />
        <img className='login-img' src={loginimg}/>
        <span className='login-desc'>请用微信扫描关注测试公众号，回复登录，获取验证码</span>
        {/* 登录表单 */}
       {/* 失焦检验 */}
        <Form onFinish={onFinish} validateTrigger="onBlur" >
  
      <Form.Item
        name="code"
        rules={[
          {
            required: true,
            message: '请输入验证码',
          },
        ]}
      >
        <Input size="large" placeholder="请输入验证码" />
      </Form.Item>
      <Form.Item>
        <Checkbox className="login-checkbox-label">
         我已阅读并同意 戴森球社区「用户协议」和「隐私条款」
        </Checkbox>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
      </Card>
    </div>
  )
}

export default Login